<template>
<div >
  <div id="container" style="width:100%;height:calc( 100vh - 50px );margin: 0 auto;"></div>
</div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from '@vue/reactivity'
import request from "@/utils/request";
export default {
  name: "Map",
  setup(){
    const map = shallowRef(null);
    return{
      map,
    }
  },
  data(){
    return{
      map:null,
      form:{},
      sources:[],
    }
  },
  created(){
    this.load();

  },
mounted() {
  this.load();
  this.initMap();
},
  methods:{
    load(){
      request.get("/user").then(res => {
        this.sources=res.data.records

      })
    },
    initMap(){
      AMapLoader.load({
        key: "8e2bd3f8e947c4874f469230daa8b873", //此处填入我们注册账号后获取的Key
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          version: "1.1",
          plugins: ["overlay/SimpleMarker", "overlay/SimpleInfoWindow"]
        }
      }).then((AMap)=>{
       let map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom:5,           //初始化地图级别
          center:[118.50685,31.668765], //初始化地图中心点位置
        });
// 地图控件
        let arr=[]
        for (let arrKey in this.sources) {
          arr.push(this.sources[arrKey])

        }
        //
        let data=JSON.parse(JSON.stringify(arr))
        // console.log(data)

        let data1=[]
        let data2=[]

        for (let key in data) {
          // console.log(data[key].identity)
          if(data[key].identity === "群众"){
            data1.push(data[key])
          }else{
            data2.push(data[key])
          }
        }

        map.plugin(
            [
              "AMap.ToolBar",
              "AMap.MapType",
              "AMap.Geolocation",
              "AMap.Scale",
              "AMap.ControlBar"
            ],
            // [],
            () => {
              // 地图工具条插件，可以用来控制地图的缩放和平移
              map.addControl(new AMap.ToolBar());
              // 地图类型切换插件，用来切换固定的几个常用图层
              map.addControl(
                  new AMap.MapType({
                    defaultType: 0
                  })
              );
              // 比例尺插件, 位于地图左下角
              map.addControl(new AMap.Scale());
              // map.addControl(new AMap.Geolocation());
              map.addControl(new AMap.ControlBar());
            }
        );

        let style1 = [
            //0:
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass2.png",
            anchor: new AMap.Pixel(3, 3),
            size: new AMap.Size(11, 11)
          },//1-10:
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(11, 11)
          },
            //11-20:
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: "https://a.amap.com/jsapi_demos/static/images/mass0.png",
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },


        ];

      let style2=[
          //0:
        {
          url: require("@/assets/icon/green.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
          //1-10:
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/yellow.png"),
          // anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        //11-20
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
        {
          url: require("@/assets/icon/red.png"),
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(15, 19)
        },
      ]



        let mass = new AMap.MassMarks(data1,{
          opacity: 0.8,
          zIndex: 111,
          cursor: "pointer",
          style: style1

        });

        let marker = new AMap.Marker({ content: " ", map: map });

        function openInfo(spid,shopname,principal,phone,achievement,style,address,lng,lat) {
          //构建信息窗体中显示的内容
          let info = [];
          info.push("<div style='padding:7px 0px 0px 0px;min-width:300px;max-width:400px;text-align:center'><h3 class='input-item'>商店名称 :"+shopname+"</h3>");
          info.push("<p class='input-item'>负责人 : "+principal+"</p>");
          info.push("<p class='input-item'>联系电话 : "+phone+"</p>");
          info.push("<p class='input-item'>销量 :"+achievement+"</p>");
          info.push("<p class='input-item'>犯错次数 :"+style+"</p>");
          info.push("<p class='input-item'>地址 :"+address+"</p>");
          // info.push('<p style="width:100%;height: 2em;line-height: 2em;background: #f2f4f5;color:#01AAED;cursor:pointer" onclick="openSpInfo(\''+spid+'\')">'+shopname+'</p></div>')

          let infoWindow = new AMap.InfoWindow({
            content: info.join("<br>"),  //传入 dom 对象，或者 html 字符串
            closeWhenClickMap:true,
            placeSearch:true,
            searchRadius:5000
          });

          infoWindow.open(map, [lng,lat]);
        }

        mass.on('click',function(e){
          let a=[]
          a=e.data.lnglat.split(",")

          openInfo(e.data.id,e.data.name,e.data.username,e.data.number,e.data.achievement,e.data.style,e.data.address,a[0],a[1]);

        })



        mass.on('mouseover', function (e) {

          let a=[]
          a=e.data.lnglat.split(",")

          marker.setPosition(new AMap.LngLat(Number(a[0]),Number(a[1])));
          marker.setLabel({content: e.data.name});

        });

        mass.on('mouseout', function (e) {

          let a=[]
          a=e.data.lnglat.split(",")
          // console.log(Number(a[0]),Number(a[1]))
          marker.setPosition(new AMap.LngLat(Number(a[0]),Number(a[1])));
          marker.setLabel({content: ""})

        });

        mass.setMap(map);

        let mass2 = new AMap.MassMarks(data2,{
          opacity: 0.8,
          zIndex: 111,
          cursor: "pointer",
          style: style2

        });

        let marker2 = new AMap.Marker({ content: " ", map: map });

        function openInfo(spid,shopname,principal,phone,achievement,style,address,lng,lat) {
          //构建信息窗体中显示的内容
          let info = [];
          info.push("<div style='padding:7px 0px 0px 0px;min-width:300px;max-width:400px;text-align:center'><h3 class='input-item'>商店名称 :"+shopname+"</h3>");
          info.push("<p class='input-item'>负责人 : "+principal+"</p>");
          info.push("<p class='input-item'>联系电话 : "+phone+"</p>");
          info.push("<p class='input-item'>销量 :"+achievement+"</p>");
          info.push("<p class='input-item'>犯错次数 :"+style+"</p>");
          info.push("<p class='input-item'>地址 :"+address+"</p>");

          // info.push('<p style="width:100%;height: 2em;line-height: 2em;background: #f2f4f5;color:#01AAED;cursor:pointer" onclick="openSpInfo(\''+spid+'\')">'+shopname+'</p></div>')

          let infoWindow = new AMap.InfoWindow({
            content: info.join("<br>"),  //传入 dom 对象，或者 html 字符串
            closeWhenClickMap:true,
            placeSearch:true,
            searchRadius:5000
          });

          infoWindow.open(map, [lng,lat]);
        }

        mass2.on('click',function(e){
          let a=[]
          a=e.data.lnglat.split(",")

          openInfo(e.data.id,e.data.name,e.data.username,e.data.number,e.data.achievement,e.data.style,e.data.address,a[0],a[1]);

        })



        mass2.on('mouseover', function (e) {

          let a=[]
          a=e.data.lnglat.split(",")

          marker.setPosition(new AMap.LngLat(Number(a[0]),Number(a[1])));
          marker.setLabel({content: e.data.name});

        });

        mass2.on('mouseout', function (e) {

          let a=[]
          a=e.data.lnglat.split(",")
          // console.log(Number(a[0]),Number(a[1]))
          marker.setPosition(new AMap.LngLat(Number(a[0]),Number(a[1])));
          marker.setLabel({content: ""})

        });

        mass2.setMap(map);


        let contextMenu = new AMap.ContextMenu();

        let  sub_contextMenuPositon;
        //右键放大
        contextMenu.addItem("放大一级", function () {
          map.zoomIn();
        }, 0);

        //右键缩小
        contextMenu.addItem("缩小一级", function () {
          map.zoomOut();
        }, 1);

        //右键显示全国范围
        contextMenu.addItem("缩放至全国范围", function (e) {
          map.setZoomAndCenter(4, [108.946609, 34.262324]);
        }, 2);

        //右键添加Marker标记
        contextMenu.addItem("添加标记", function (e) {
          let marker1 = new AMap.Marker({
            map: map,
            position: sub_contextMenuPositon//基点位置
          });
        }, 3);

        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e) {
          contextMenu.open(map, e.lnglat);
          sub_contextMenuPositon = e.lnglat;
        });


        contextMenu.open(map, lnglat);

      }).catch(e=>{

      })
    },
  }
}
</script>

<style scoped>

</style>